<template>
  <div>
    <div>
      <tab :line-width=2 v-model="index">
        <tab-item class="vux-center" :selected="showType === 'coupon'">优惠券</tab-item>
        <tab-item class="vux-center" :selected="showType === 'vip'">VIP券</tab-item>
        <tab-item class="vux-center" :selected="showType === 'cash'">提现券</tab-item>
      </tab>
      <flexbox v-if="index === 0">
        <flexbox-item>
          <div class="flex-demo" v-for="couponList in couponList">
            <div class="couponBox">
              <p>
                <span>{{couponList.name}}</span>
                <span>¥{{couponList.money}}</span>
              </p>
              <p class="validity">{{couponList.time}}</p>
            </div>
          </div>
        </flexbox-item>
      </flexbox>
      <flexbox v-if="index === 1" v-for="vipList in vipList">
        <flexbox-item style="border: solid 1px grey;border-radius: 4px;margin: 8px 15px 0 15px !important;">
          <flexbox :gutter="0" wrap="nowrap">
            <flexbox-item :span="4">
              <img :src="vipList.src" style="width: 80px;height: 80px;" alt="">
            </flexbox-item>
            <flexbox-item :span="6">
              {{vipList.name}}
            </flexbox-item>
            <flexbox-item :span="2">
              {{vipList.money}}折
            </flexbox-item>
          </flexbox>
        </flexbox-item>
      </flexbox>
      <flexbox v-if="index === 2">
        <flexbox-item>
          <div class="flex-demo" v-for="cashList in cashList">
            <div class="couponBox">
              <p>
                <span>{{cashList.name}}</span>
                <span>¥{{cashList.money}}</span>
              </p>
              <p class="validity">{{cashList.time}}</p>
            </div>
          </div>
        </flexbox-item>
      </flexbox>
    </div>
  </div>
</template>

<script>
  import { Group, Cell, Tab, TabItem, Swiper, SwiperItem, Flexbox, FlexboxItem } from 'vux'

  export default {
    components: {
      Group,
      Cell,
      Tab,
      TabItem,
      Swiper,
      SwiperItem,
      Flexbox,
      FlexboxItem
    },
    data () {
      return {
        showType: 'coupon',
        index: 0,
        couponSwiperHeight: 500,
        couponList: [
          {
            name: '优惠券1',
            money: '50',
            time: '2017.02.06-2017.03.06'
          },
          {
            name: '优惠券2',
            money: '50',
            time: '2017.02.06-2017.03.06'
          },
          {
            name: '优惠券3',
            money: '50',
            time: '2017.02.06-2017.03.06'
          }
        ],
        vipList: [
          {
            name: '胖胖烤肉世豪店',
            money: '8.5',
            src: 'https://o5omsejde.qnssl.com/demo/test1.jpg'
          },
          {
            name: '胖胖烤肉复城店',
            money: '6',
            src: 'https://o5omsejde.qnssl.com/demo/test2.jpg'
          },
          {
            name: '胖胖烤肉银泰店',
            money: '8.8',
            src: 'https://o5omsejde.qnssl.com/demo/test3.jpg'
          }
        ],
        cashList: [
          {
            name: '提现券1',
            money: '50',
            time: '2017.02.06-2017.03.06'
          },
          {
            name: '提现券2',
            money: '50',
            time: '2017.02.06-2017.03.06'
          },
          {
            name: '提现券3',
            money: '50',
            time: '2017.02.06-2017.03.06'
          },
          {
            name: '提现券4',
            money: '50',
            time: '2017.02.06-2017.03.06'
          },
          {
            name: '提现券5',
            money: '50',
            time: '2017.02.06-2017.03.06'
          },
          {
            name: '提现券6',
            money: '50',
            time: '2017.02.06-2017.03.06'
          },
          {
            name: '提现券7',
            money: '50',
            time: '2017.02.06-2017.03.06'
          }
        ]
      }
    },
    mounted: function () {
//      this.$root.$children[0].$data.isShowHeader = true // 显示header
    },
    methods: {
//      change1: function () {
//        this.showType = 'coupon'
//      },
//      change2: function () {
//        debugger
//        this.showType = 'vip'
//      },
//      change3: function () {
//        this.showType = 'cash'
//      }
    }
  }
</script>

<style scoped=“scoped”>
  .tab-swiper{
    height: auto;
  }
  .couponBox{
    border: solid 1px grey;
    margin: 10px 15px;
    border-radius: 5px;
  }
  .couponBox >p:nth-child(1){
    border-bottom: dashed 1px grey;
  }
  .couponBox >p >span{
    display: inline-block;
    font-size: 20px;
    padding: 0 10px;
  }
  .couponBox >p >span:nth-child(2){
    float: right;
  }
  p{
    line-height: 50px;
  }
  .validity{
    text-align: right;
    line-height: 30px;
    padding-right: 10px;
  }
  .flex-demo {
    /*text-align: center;*/
    /*color: #fff;*/
    /*background-color: #20b907;*/
    border-radius: 4px;
    background-clip: padding-box;
    margin-top: 8px;
  }
</style>
